<template>
	<view>
		<view class="cf-container ns-border-color-gray">
			<view class="tab">
				<view @click="getType(0)"><text :class="type == 0 ? 'ns-text-color active' : ''">全部</text></view>
				<view @click="getType(1)"><text :class="type == 1 ? 'ns-text-color active' : ''">本周</text></view>
				<view @click="getType(2)"><text :class="type == 2 ? 'ns-text-color active' : ''">本月</text></view>
				<view @click="getType(3)"><text :class="type == 3 ? 'ns-text-color active' : ''">本年</text></view>
			</view>
		</view>
		<view class="collection-goods-list">
			<view v-for="(item, index) in list" :key="index" class="goods-info">
				<view class="collection-time">{{ item.fav_time }}</view>
				<view class="ns-padding">
					<navigator class="goods-img" :url="'/pages/goods/detail/detail?goods_id=' + item.goods_id">
						<image :src="item.pic_cover_mid != null ? $util.img(item.pic_cover_mid) : $util.img('upload/uniapp/default_goods.png')" class="pic"></image>
					</navigator>
					<view class="data-info">
						<navigator class="goods-name" :url="'/pages/goods/detail/detail?goods_id=' + item.goods_id">{{ item.goods_name }}</navigator>
						<view class="price-share">
							<text class="price ns-text-color">{{ item.display_price }}</text>
							<text class="cancel-collection" @click="cancelFavorites(item, index)">取消收藏</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<uni-load-more :status="status" :content-text="contentText" v-if="list.length > 0 && pageCount > 1" />
		<!-- 数据为空 -->
		<view v-if="isEmpty && list.length == 0" class="empty">
			<view class="iconfont iconwenzhangchaxun"></view>
			<view class="ns-text-color-gray">Sorry！没有找到您想要的商品…</view>
			<button type="primary" @click="goIndex()">去首页逛逛吧</button>
		</view>
		<ns-login ref="login" href = 'collection'></ns-login>
	</view>
</template>

<script>
import http from 'common/js/http.js';
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
import nsLogin from 'components/ns-login/ns-login.vue';
export default {
	components: {
		uniLoadMore,
		nsLogin
	},
	data() {
		return {
			pageIndex: 1,
			pageCount: 0,
			pageSize: 10,
			type: 0,
			list: [],
			isEmpty: false,
			typeName: '',
			status: 'loading',
			contentText: {
				contentdown: '上拉加载更多',
				contentrefresh: '加载中',
				contentnomore: '没有更多了'
			},
			ident: false //防止初始化时，触发上拉加载
		};
	},
	onShow() {
		var isLogin = false;
		// #ifdef H5
		getApp().checkLogin(() => {
			isLogin = true;
			setTimeout(() => {
				this.$refs.login.clickLogin();
			}, 100);
		});
		// #endif
		// #ifdef MP
		getApp().$vm.checkLogin(() => {
			isLogin = true;
			this.$refs.login.clickLogin();
		});
		// #endif

		if (isLogin) return;

		this.getType(0);
	},
	onReachBottom() {
		if (!this.ident) return;
		this.getList();
	},
	mixins: [http],
	methods: {
		getType(type) {
			this.pageIndex = 1;
			this.status = 'loading';
			this.type = type;
			this.list = [];
			if (this.type == 1) {
				this.typeName = '本周';
			} else if (this.type == 2) {
				this.typeName = '本月';
			} else if (this.type == 3) {
				this.typeName = '本年';
			} else if (this.type == 0) {
				this.typeName = '全部';
			}
			this.getList('refresh');
		},
		getList(type = 'add') {
			if (this.status == 'nomore') return;
			this.sendRequest({
				url: 'System.Member.collection',
				data: {
					page_index: this.pageIndex,
					page_size: this.pageSize,
					type: this.type
				},
				success: res => {
					this.ident = true;
					if (res.code == 0) {
						let data = res.data.data;
						this.pageCount = res.data.page_count;
						if (this.pageCount == 0) {
							this.status = 'nomore';
							this.isEmpty = true;
							this.contentText.contentnomore = '';
						} else {
							if (this.pageIndex < this.pageCount) {
								this.status = 'more';
							} else {
								this.status = 'nomore';
								this.contentText.contentnomore = '没有更多了';
							}
							this.isEmpty = false;

							if (data.length > 0) {
								if (type == 'refresh') {
									this.list = data;
								} else {
									this.list = this.list.concat(data);
								}
								this.pageIndex++;
							}
						}
					}
				}
			});
		},
		cancelFavorites(item, index) {
			this.sendRequest({
				url: 'System.Member.cancelCollection',
				data: {
					fav_id: item.fav_id,
					fav_type: item.fav_type,
					type: this.type
				},
				success: res => {
					this.list.splice(index, 1);
					if (this.list.length == 0) {
						this.isEmpty = true;
						this.contentText.contentnomore = '';
					}
					this.$util.showToast({
						title: '取消收藏成功'
					});
				}
			});
		},
		goIndex() {
			this.$util.redirectTo('/pages/index/index/index', {}, 'tabbar');
		}
	}
};
</script>

<style lang="scss">
.active {
	border-bottom: 4rpx solid $base-color;
}

.tab {
	display: flex;
	justify-content: space-between;
}

.tab > view {
	text-align: center;
	width: 33%;
	text {
		display: inline-block;
		line-height: 88rpx;
	}
}

.cf-container {
	position: fixed;
	left: 0;
	right: 0;
	top: 44px;
	/* #ifdef MP */
	top: 0;
	/* #endif */
	z-index: 2;
	max-width: 1280rpx;
	overflow: hidden;
	border-top: 2rpx solid;
	background-color: #fff;
}

.cf-container .cf-content {
	position: relative;
	text-align: center;
	white-space: nowrap;
	z-index: 5;
	-webkit-overflow-scrolling: touch;
	margin: 0 0.1rem;
	overflow: hidden;
}

.cf-container .cf-tab-item {
	line-height: 64rpx;
	text-align: center;
	width: 25%;
	float: left;
}

.cf-tab-item navigator {
	padding: 0 4rpx;
	display: block;
	border-bottom: 4rpx solid transparent;
}

.collection-goods-empty {
	line-height: 120rpx;
	text-align: center;
}

.collection-goods-list {
	width: 100%;
	box-sizing: border-box;
	margin-top: 124rpx;
}

.collection-goods-list .goods-info {
	width: 100%;
	box-sizing: border-box;
	overflow: hidden;
	margin-top: 30rpx;
	background-color: #fff;
}

.collection-goods-list .goods-info:last-child {
	border-bottom: none;
}

.collection-goods-list .goods-info .collection-time {
	width: 100%;
	height: 88rpx;
	line-height: 88rpx;
	font-size: $ns-font-size-lg;
	color: $ns-text-color-gray;
	padding: 0 30rpx;
	border-bottom: 2rpx solid $ns-border-color-gray;
}

.collection-goods-list .goods-info .goods-img {
	height: 200rpx;
	width: 200rpx;
	text-align: center;
	line-height: 200rpx;
	float: left;
	margin-right: 20rpx;
	margin-bottom: 10rpx;
}

.collection-goods-list .goods-info .goods-img .pic {
	max-height: 100%;
	max-width: 100%;
	vertical-align: middle;
	height: 100%;
}

.collection-goods-list .goods-info .data-info {
	height: 200rpx;
	float: left;
	width: 64%;
	position: relative;
}

.collection-goods-list .goods-info .data-info .goods-name {
	overflow: hidden;
	text-overflow: ellipsis;
	-webkit-box-orient: vertical;
	display: -webkit-box;
	font-size: $ns-font-size-base;
	height: 96rpx;
	-webkit-line-clamp: 2;
}

.collection-goods-list .goods-info .data-info .price-share {
	position: absolute;
	height: 60rpx;
	line-height: 60rpx;
	bottom: 0;
	display: flex;
	width: 100%;
	justify-content: space-between;
	margin-bottom: 14rpx;
}

.collection-goods-list .goods-info .data-info .price-share .price {
	float: left;
}

.collection-goods-list.cancel-collection {
	float: right;
}
</style>
